<template>
  <div>
    <div class="mg-content">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input @keyup.enter.native="keyDown($event)" placeholder="请输入退菜原因" v-model="input" :maxlength="20" size="medium">
            <template slot="prepend">原因</template>
          </el-input>
        </el-col>
        <el-col :span="10">
          <div  class="text-left">

            <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
            <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
          </div>
        </el-col>
      </el-row>

      <div class="title-buttons">
        <el-button v-hasPermission="'management_comment:create'"  class="title-button btn-primary"  size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">新增原因&nbsp;</el-button>
        <el-button v-hasPermission="'management_comment:allocationBranch'" class="title-button btn-primary"  size="medium" @click="addStores()" icon="el-icon-plus">批量分配机构&nbsp;</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="tableData"
            :border="true"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              label="备注名称">
              <template  slot-scope="scope">
                <span v-if="scope.row.branchs">
                              <el-button type="text" @click="isStoreNum=!isStoreNum;activityId=scope.row.id">{{scope.row.name}}</el-button>
                              </span>
                <span v-else>{{scope.row.name}}</span>
                <span v-if="scope.row.sys" class="c-1">
                        <i class="icon icon-yuandian"></i></span>
              </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--label="原因编码">-->
            <!--<template  slot-scope="scope">-->
            <!--<span>{{scope.row.name}}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
           <!-- <el-table-column
              label="适用门店">
              <template  slot-scope="scope">
                <span v-if="scope.row.branchs"><el-button type="text" @click="isStoreNum=!isStoreNum;activityId=scope.row.id">{{scope.row.branchs}}</el-button></span>
                <span v-else>&#45;&#45;&#45;&#45;</span>
              </template>
            </el-table-column>-->
            <el-table-column
              label="操作人">
              <template  slot-scope="scope">
                <span>{{scope.row.operatorName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作时间">
              <template  slot-scope="scope">
                <span>{{scope.row.operateTime}}</span>
              </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--label="修改" width="70">-->
            <!--<template  slot-scope="scope">-->
            <!--<span class="icon icon-xiugai-copy table-icon" @click="addShow=true;activityId=scope.row.id"></span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
            <!--label="删除" width="70">-->
            <!--<template  slot-scope="scope">-->
            <!--<span class="icon icon-delete table-icon" @click="handleDelete(scope.$index,scope.$index,scope.row.id)"></span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column
              label="操作" width="200">
              <template scope="scope" >
                <!--<el-button type="text" size="small" style="margin: 0px;" @click=""  >启用</el-button>-->
                <el-button v-hasPermission="'management_comment:allocationBranch'" type="text" size="small" style="margin: 0px;" @click="addStore=true;activityId=scope.row.id;" >分配机构</el-button>
                <el-button v-hasPermission="'management_comment:update'"  type="text" size="small" style="margin: 0px;" @click="addShow=true;activityId=scope.row.id" > | 修改</el-button>
                <el-button v-hasPermission="'management_comment:destory'" style="margin: 0px;" @click="handleDelete(scope.$index,scope.$index,scope.row.id)"
                           type="text" size="small" v-if="!scope.row.sys"
                > | 删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <br>
      <div class="block">
        <el-row>
          <el-col :span="24" class="text-right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
    <model :isShow="addShow" :id="activityId" @close="addClose" @addSuccess="addSuccess"></model>
    <setStore :isShow="addStore" :reason="multipleSelection"  :id="activityId"  @close="addClose1" @addSuccess="addSuccess1"></setStore>
    <store-num :isShow="isStoreNum"   :id="activityId"  @close="addClose2" @addSuccess="addSuccess2"></store-num>
    <PluginConfirm
      :show="dialogIsShow"
      @chooseSure="chooseSure()"
      @chooseCancel="chooseCancel()"
      @dialogResult="dialogResult">
    </PluginConfirm>
  </div>
</template>
<script>
  //注意路径
  import model from './model.vue'
  import setStore from './setStore.vue'
  import storeNum from './storeNum.vue'
  export default{
    data(){
      return {
        isStoreNum:false,
        addStore:false,
        multipleSelection: [],
        treeData:[],
        loading:false,
        tableData: [],
        pageSizes:window.pageSizes,//所有可选择的条数
        pageSize:window.pageSize,//控制一页显示的条数
        total:10,//总条数
        input:"",
        currentPage:1,
        inputValue:"",
        dialogIsShow:false,
        addShow:false,
        activityId:"",
        dialogIsShow:false,
        curDataRow:null,
        curDataIndex:0,
        selectItmeIndex:"",
        selectItemDetailsIndex:"",
        selectDelId:""

      }
    },
    components: {
      model,
      setStore,
      storeNum
    },
    created(){
      window.this = this;
      this.initData();
    },
    methods: {
      addStores(){
        if(this.multipleSelection.length<=0){
          this.$message.error("请选择原因后操作");
          return;
        }
        this.addStore=true;this.activityId=''
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val);
      },
      initData(){
        this.currentPage=1;
        this.getData();
      },
      keyDown(ev){
        if(ev.keyCode==13) {
          this.currentPage=1;
          this.inputValue=this.input;
          this.getData();
        }
      },
      cleanSearch(){
        this.currentPage=1;
        this.input="";
        this.inputValue=this.input;
        this.getData();
      },
      search(){
        this.currentPage=1;
        this.inputValue=this.input;
        this.getData();
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        this.getData();
      },
      getData(){
        // this.loading=true;
        this.$axios.get("auxiliary/comments?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like="+this.inputValue+"&search.type_eq=TUICAI").then((data)=>{
          this.loading=false
          this.tableData=data.content.content;
          this.total=data.content.totalElements;
        }).catch(function(err){
        })
      },
      handleDelete(index,delIndex,id) {
        this.selectItmeIndex=index,
          this.selectItemDetailsIndex=delIndex;
        this.selectDelId=id;
        this.dialogIsShow=true;
      },
      dialogResult(param){
        this.dialogIsShow=param.close;
        if(param.choose==="ok"){
          //console.log("确定");
          this.$axios.delete("auxiliary/comments/"+this.selectDelId).then(data=>{
            if(data.status==200){
              this.tableData.splice(this.curDataIndex,1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initData();
            }else{
              this.$message({
                type: 'error',
                message: data.message
              });
            }
          })
        }else if(param.choose==="cancel"){
          //console.log("取消");
        }else{
          //console.log("不做处理");
        }
      },

      addSuccess(item){
        this.addShow=false;
        this.currentPage=1;
        this.initData();
      },
      addSuccess1(item){
        this.addStore=false;
        this.currentPage=1;
        this.initData();
      },
      addClose(){
        this.addShow=false;
      },
      addClose1(){
        this.addStore=false;
      },
      addClose2(){
        this.isStoreNum=false;
      },
      addSuccess2(item){
        this.isStoreNum=false;
        this.currentPage=1;
        this.initData();
      },
      handleSizeChange(val){
        this.pageSize=val;
        this.getData();
      },
    }
  }
</script>
<style scoped>
</style>
